<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>发改局</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <!-- IonIcons -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
</head>


<body class="hold-transition sidebar-mini">
<div class="wrapper">

  <!-- 主内容容器 -->
  <div class="content-wrapper">
    <!-- 容器头标题 -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0">政策文件发布</h1>
          </div>

          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="#">首页</a></li>
              <li class="breadcrumb-item active">政策文件发布</li>
            </ol>
          </div>

        </div>

      </div>

    </div>

    <!-- 主题内容正文 -->
    <div class="content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-lg-6">

            <div class="card card-primary">
              <!-- 卡片头部 -->
              <div class="card-header">
                <h3 class="card-title">政策文件发布</h3>
              </div>

              <!-- 表单开始 -->
              <form id="formData">
                <div class="card-body">

                  <div class="form-group">
                    <label for="title">标题</label>
                    <input type="text" class="form-control" id="title" name="title" placeholder="标题" style="width: 285px;">
                  </div>

                  <div id="div1"></div>

                  <div class="form-group" style="margin-top: 10px;">
                    <label for="file_id">政策文件上传</label>

                    <div class="input-group" style="margin: 7px;">
                      <div class="row">
                        <div class="col-lg-12">
                          <div class="input-file" style="width: 450px;">
                            <input type="file" class="custom-file-input" id="file_id" name="file" accept=".docx,.doc">
                            <label class="custom-file-label" for="file_id" id="file_path">请选择</label>
                          </div>
                        </div>
                      </div>
                    </div>

                  </div>

                </div>

                <!-- 发布按钮 -->
                <div class="card-footer">
                  <button type="button" class="btn btn-primary" id="pubish_btn">发布</button>
                </div>
              </form>

            </div>

          </div>

          <div class="col-lg-6">
          </div>

        </div>

      </div>

    </div>

  </div>


  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
  </aside>

  <!-- 版权信息 -->
  <footer class="main-footer">
    <strong>Copyright &copy; 2021 <a href="http://www.chengzhouyun.com/" target="_blank">ChengZhouYun</a>.</strong> All
    rights reserved.
    <div class="float-right d-none d-sm-inline-block">
      <b>Version</b> 1.0
    </div>
  </footer>

</div>


<!-- REQUIRED SCRIPTS -->
<!-- jQuery -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="../dist/js/adminlte.js"></script>

<!-- OPTIONAL SCRIPTS -->
<script src="../plugins/chart.js/Chart.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="../dist/js/pages/dashboard3.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
</body>
<script th:inline="javascript">

  function isEmptyNull(value){
    if (value == undefined || value == null || value =="") {
      return false;
    }
    return true;
  }

  const E = window.wangEditor
  const editor = new E("#div1")

  // 或者 const editor = new E(document.getElementById('div1'))
  editor.create()
  // editor.txt.html('<p>用 JS 设置的内容</p>') // 重新设置编辑器内容
  $(function(){

    // 发布按钮注册点击事件
    $("#pubish_btn").on("click",function(){
      console.log(editor.txt.html())
      console.log(editor.txt.text())


      if(!isEmptyNull($("#title").val())){
        alert("请填写标题")
        return;
      }

      if(!isEmptyNull(editor.txt.text())){
        alert("请填写内容")
        return;
      }

      if(isEmptyNull($("#file_id").val())){
        var filenamepath = $("#file_id").val();
        console.log(filenamepath)
        var lastindex = filenamepath.lastIndexOf('.');
        var filename = filenamepath.substr(lastindex+1).toLowerCase();

        console.log(filename)

        if(("doc" === filename) || ("docx" === filename)){

        }else{
          alert("请选择doc或docx类型文件")
          return;
        }
      }

      var inputContent = document.createElement("input");
      inputContent.type = "text";
      inputContent.name = "content";
      inputContent.value = editor.txt.html()

      $("#formData")[0].append(inputContent);

      // 此处使用ajax文件上传
      $.ajax({
        url:"/publishfile/file",
        type:"post",
        data: new FormData($("#formData")[0]),  // 取表单完整内容
        contentType: false,
        processData : false,
        dataType:"json",
        success: function(res){

          if(res.statusCode == 200) {
            alert(res.message);
            console.log("成功")
            // 跳转页面
            location.href = "/page/PolicyFileInfo"
          } else{
            alert(res.errorMsg);
            console.log("失败")
          }

        }
      })

    })


    // 图片选择事件
    $("#file_id").change("value",function(){
      var value = $("#file_id").val();
      if (value != undefined && value != ''){
        $("#file_path").text(value);
      }
    })

  })


</script>
</html>
